<!DOCTYPE html>
<!-- 通过 xmlns:th=”http://www.thymeleaf.org“ 命令空间，将静态页面转换为动态的视图，
需要进行动态处理的元素,将使用“th:”前缀。 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>时光小说下载网-首页</title>

    <link rel="stylesheet" href="webjars/bootstrap/3.4.1/css/bootstrap.css">
    <script src="webjars/jquery/3.6.0/jquery.js"></script>
    <script src="webjars/bootstrap/3.4.1/js/bootstrap.js"></script>

    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/head-logo.css">
    <link rel="stylesheet" href="css/novelDetail.css">

</head>

<body>
<div class="container">

    <!--页眉-用户登录/注册-->
    <!--LOGO区域-->
    <div th:replace="head-logo :: head-logo"></div>

    <!--菜单导航区域-->
    <div th:replace="nav :: nav"></div>

    <!--小说主体内容区域-->
    <div class="content">
        <!--左侧-->
        <div class="content-left">
            <!-- 电子书详情展示区域 -->
            <div class="content-left-detail">
                <div class="title">
                    《 [[ ${novelInfo[0].title } ]] 》
                </div>
                <div class="info">
                    <div class="left">
                        <ul>
                            <li>
                                <span class="book-title">书籍作者:</span>
                                <span> [[ ${novelInfo[0].authorName } ]] </span>
                            </li>
                            <li>
                                <span class="book-title">书籍分类:</span>
                                <span th:each="cateItem : ${categoriesList }"
                                      th:if="${cateItem.cateId==novelInfo[0].cateId}">[[ ${cateItem.cateName } ]]  </span>

                            </li>
                            <li>
                                <span class="book-title">书籍大小:</span>
                                <span> [[ ${novelInfo[0].nSize } ]] KB</span>
                            </li>
                            <li>
                                <span class="book-title">书籍类型:</span>
                                <span th:if="${novelInfo[0].nType ==0}">转载txt</span>
                                <span th:if="${novelInfo[0].nType ==1}">原创txt</span>
                            </li>
                            <li>
                                <span class="book-title">写作进度:</span>
                                <span th:if="${novelInfo[0].progress ==0}">已完结</span>
                                <span th:if="${novelInfo[0].progress ==1}">连载中</span>
                            </li>
                            <!--
                            <li>
                                <span class="book-title">上传会员:</span>
                                <span>${user.username }</span>
                            </li>
                             -->
                            <li class="count">
										<span>
											<span class="book-title">下载次数:</span>
											<span> [[ ${novelInfo[0].downCount } ]] </span>
										</span>
                                <span>
											<span class="book-title">阅读次数:</span>
											<span> [[ ${novelInfo[0].readCount } ]] </span>
										</span>
                                <span>
											<span class="book-title">推荐次数:</span>
											<span> [[ ${novelInfo[0].recommend } ]] </span>
										</span>

                            </li>
                            <li>
                                <span class="book-title">最后更新:</span>
                                <span>  [[ ${#calendars.format(novelInfo[0].lastUpdate,'yyyy-MM-dd HH:mm:ss')} ]] </span>
                            </li>
                            <li>
                                <span class="book-title">登录操作:</span>
                                <span class="option">
                                          <span th:if="${user!=null }">
                                              <a th:if="${isFavorite==null }" href="javascript:void(0)" class="addF">加入收藏</a>
                                              <a th:if="${isFavorite!=null }" href="javascript:void(0)"
                                                 class="subF">已收藏</a>

											  <a href="#">推荐小说</a>
											  <a href="#">发表评论</a>
                                          </span>
								</span>
                            </li>
                        </ul>

                    </div>

                    <div class="right">
                        <img th:src="${novelInfo[0].photo}" width="180px" height="240px"/>
                    </div>
                </div>

            </div>

            <!-- 电子书内容介绍区域 -->
            <div class="content-left-introduce">
                <div class="title">
                    <div class="introduce-title">内容介绍</div>
                </div>

                <div class="introduce-main">
                    文案:
                    <p>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        [[ ${novelInfo[0].content} ]]
                    </p>
                    <p class="tag">
                        标签: <span>穿越重生</span>
                    <P>===========</P>
                    </p>
                </div>
            </div>
            <!-- 电子书阅读与下载区域 -->
            <div class="content-left-readLoad">
                <div class="title">
                    <div class="introduce-title">下载地址</div>
                </div>
                <div class="readLoad-main">
                    <div class="read">

                        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
                        <a th:href="@{/toNovelcharpt(novelId=${novelInfo[0].novelId } ) }">在线阅读小说全文</a>
                    </div>
                    <div class="load">
                        <span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>
                        <a href="javascript:void(0);" class="downloadNovle">TXT电子书下载地址【无需压缩】</a>
                    </div>
                </div>
            </div>
            <!-- 电子书评价区域 -->
            <div class="content-left-comment">
                <div class="title">
                    <div class="introduce-title">小说评价</div>
                </div>
                <div class="comment">
                    <ul class="list-group">

                            <li th:each="rate : ${rateList }" a class="list-group-item">
                                <p> [[ ${rate.content } ]] </p>
                                <div class="reply">
                                    <span> 发表于 [  [[ ${#calendars.format(rate.pushTime,'yyyy-MM-dd HH:mm:ss')} ]] ]</span> <a href="">回复</a>
                                </div>

                            </li>

                    </ul>
                </div>
            </div>
        </div>
        <!--右侧-->
        <div th:replace="rank::rank"></div>
    </div>


    <!--页尾 版本声明区域-->
    <div class="footer">
        <div class="my">
            关于我们 - 网址帮助 - 广告服务 - 版权声明 - 友情连接 - 网站地图
        </div>

        <div class="version-info">
            Copyright &copy; www.huhua.com All Rights Revered 页面版权所有 时光小说下载网 ICP备 187***64号
        </div>
    </div>
</div>
</body>
</html>


<script>

    $(".downloadNovle").click(function () {
        $.ajax({
            url: "downLoad?novelId="+[[ ${novelInfo[0].novelId } ]],
            method: "get",
            dataType: "json",
            success: function (data) {
                var novleDate = "";
                //下载内容只需要 章节名字和章节内容
                data.charptList.forEach(charpt => {
                    novleDate += charpt.title + "\n\n\n" + charpt.content + "\n\n\n\n\n\n";

                })

                //var	novleDate=JSON.stringify(data);

                //利用a标签的download属性+blob 实现下载
                let a = document.createElement("a");
                let blob = new Blob([novleDate], {type: "text/plain"});
                let url = window.URL.createObjectURL(blob);
                a.href = url;
                a.download = data.title + ".txt";
                a.style.display = "none";
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);


            },
            error: function () {
                alert("服务异常！")
            }
        })
    })

    $(".addF").click(function () {

        window.location.href = "addFavorites?userid=" +[[ ${novelInfo[0].sendId }  ]]+"&novelid=" + [[ ${novelInfo[0].novelId} ]]


    })
</script>